﻿@model XZen.Blogger.Issue

@{
    ViewBag.Title = "Edit";
  
}

<script src="~/Scripts/filedrop.js"></script>
<br />
<div class="row">
     
    <div class="col-sm-6">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h6 class="panel-title"><i class="icon-book"></i>Isssue on Books</h6>
                 <span class="label pull-right">
                     @Html.ActionLink("Back To Magazine","Edit", new {id=Model.MagazineID}, null)
                </span>
            </div>
            <div class="panel-body">
 @Html.Partial("_Feedback")
                @using (Html.BeginForm("EditIssue", "Magazine", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                {
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true)
  

                    <div class="form" role="form">
                        @Html.HiddenFor(model => model.ID)
                        @Html.HiddenFor(model => model.CoverPageUrl)
                        <div class="alert alert-success fade in block-inner">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            <noscript style="color: maroon">
                                <h2>JavaScript is disabled in your browser. How do you expect FileDrop to work?</h2>
                            </noscript>
                            <div id="imageCover">
                                <img  class="img-icon" src="@Model.CoverPageUrl" />
                            </div>
                            <div id="zone" style="position: relative;">
                                <em>Upload</em>
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Name: </label>
                            <div class="col-sm-10">
                                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Title: </label>
                            <div class="col-sm-10">
                                @Html.TextBoxFor(model => model.Title, new { @class = "form-control" })
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">Category: </label>
                            <div class="col-sm-10">
                                @Html.TextBoxFor(model => model.Category, new { @class = "form-control" })
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">ID: </label>
                            <div class="col-sm-10">
                                @Html.TextBoxFor(model => model.ID, new { @class = "form-control", disabled = "disabled" })
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Description: </label>
                            <div class="col-sm-10">
                                @Html.TextAreaFor(model => model.Body, new { @class = "form-control", rows = "5", cols = "5", placeholder = "Default textarea" })
                            </div>
                        </div>

                        <div class="form-actions text-right">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
        
      
                }

                <div>
                    @Html.ActionLink("Back to List", "Index")
                </div>

            </div>
            <script type="text/javascript">
                var issueId = '@(Model.ID== null ? Model.MagazineID: Model.ID)';
                var uploadUrl = '/Magazine/Upload/' + issueId;
                // Tell FileDrop we can deal with iframe uploads using this URL:
                var options = { iframe: { url: uploadUrl } };
                // Attach FileDrop to an area ('zone' is an ID but you can also give a DOM node):
                var zone = new FileDrop('zone', options);

                // Do something when a user chooses or drops a file:
                zone.event('send', function (files) {
                    // Depending on browser support files (FileList) might contain multiple items.
                    files.each(function (file) {
                        // React on successful AJAX upload:
                        file.event('done', function (xhr) {
                            var data = $.parseJSON(xhr.responseText);
                            $("#imageCover").append($('<span><img  class="img-icon" src="' + data.Url + '"/></span>'));
                            $("#CoverPageUrl").val(data.Url);
                        });

                        // Send the file:
                        file.sendTo(uploadUrl);
                    });
                });

                // React on successful iframe fallback upload (this is separate mechanism
                // from proper AJAX upload hence another handler):
                zone.event('iframeDone', function (xhr) {
                    var data = $.parseJSON(xhr.responseText);
                    $("#imageCover").html('<img  class="img-icon" src="' + data.Url + '"/>');
                    $("#CoverPageUrl").val(data.Url);
                });

                // A bit of sugar - toggling multiple selection:
                fd.addEvent(fd.byID('multiple'), 'change', function (e) {
                    zone.multiple(e.currentTarget || e.srcElement.checked);
                });

            </script>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h6 class="panel-title"><i class="icon-book"></i>Popular Books</h6>
                <span class="label  pull-right">
                    @Html.ActionLink("Create New Chapter", "CreateChapter", "Magazine", new { id=Model.ID }, null)
                </span>
            </div>
            <div class="panel-body">
                <div class="datatable-chapter">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Issue</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var issue in Model.Chapters)
                            {
                                <tr>
                                    <td>@issue.Title</td>
                                    <td>@issue.Body</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
